<template>
	<view class="product-wrap">
		<template v-for="(item, index) in spuList">
			<view class="product-item exposure"
						@touchmove="handletouchmove"
						v-if="item.haveStock || isShowNoStock"
						@touchstart="handletouchstart"
						@touchend="handletouchend"
						:data-id="item.id"
						:data-index="index+1"
						:data-type="1"
						:data-moduleOrder="moduleOrder"
						:data-moduleType="moduleType"
						@click="goToGoodDetail(item.id,index)"
						:item="item"
						:key="index"
			>
				<view class="image" style="position: relative;" :class="{'sale-out': countPrice(item).haveStock == 0}">
					<image :src="item.mainImageUrl" class="image"></image>
				</view>
				<view v-if="item.minJfCost && false" class="can-interal-mall">
					<image src="/static/public/ic_jifen@2x.png" class="interal-image"></image>
					{{item.minJfCost}}移动积分
				</view>
				<view class="des">
					<text class="multi-elps clearfix">
						<view class="pro-icon-box">
							<!-- todo秒杀 -->
							<i class="miaoShaIcon" v-if="item.activityType == 2"></i>
							<i class="presall-icon" v-if="item.presellStatus == 1"></i>
							<!-- <i class="miguIcon" v-if="item.supplierType == 1"></i> -->
							<i class="miguIcon" v-if="!(item.activityType == 2&&item.presellStatus == 1)&&item.commercialType == 2"></i>
						</view>
						{{ item.labels | labelForm }}{{ item.name }}
					</text>
				</view>
				<view class="items" v-if="item.haveStock == 1 || isShowNoStock == 1">
					<!-- 内购商品 -->
					<block v-if="sourceType =='206' ">
						<text class="price"><text class="small">{{priceBefore}}</text>{{item.minInternalPrice/100||0}}{{priceAfter}}</text>
						<text class="priceLable" ></text>
					</block>
					<!-- 会员专区商品 -->
					<block v-else-if="sourceType == '204' ">
						<text class="price"><text class="small">¥</text>{{item.minVipPrice/100||0}}</text>
						<text class="priceLable2" ></text>
					</block>
					<!-- 普通商品 -->
					<block v-else>
						<text class="price"  v-if="countPrice(item).price">
							<text class="small">{{countPrice(item).noPrice ? '' : priceBefore}}</text>
							{{countPrice(item).price}}{{countPrice(item).noPrice ? '' : priceAfter}}
						</text>
						<text :class="countPrice(item).priceSign"></text>
					</block>
					<view class="startPrice" v-if="isShowMarketValue&&countPrice(item).delprice">
						<del>￥{{countPrice(item).delprice}}</del>
					</view>
				</view>
			</view>
		</template>
		<view class="checkMore" v-if="showMore">
			<view class="checkmoreImg" @click="goMore()"></view>
		</view>
	</view>
</template>

<script>
import handleTouch from '@/ext/handleTouch.js';
export default{
	mixins: [handleTouch],
	props: {
		spuList: {
			type: Array,
			default: () => {
				return []
			}
		},
		sourceType: {
			type: String,
			default: () => {
				return ''
			}
		},
		moduleType: {
			type: String,
			default: "prod_list"
		},
		params:{
			type:String,
			default:()=>{
				return ""
			}
		}, //来源模块id
		refModuleId: {
			type: [Number, String],
			default: 0
		},
		//来源模块在页面的排序序号
		moduleOrder: {
			type: [Number,String],
			default: 0
		}
	},
	data() {
		return {
			showMore: false
		}
	},
	watch: {
		spuList: {
			handler(list) {
				if (list && list.length) {
					this.showMore = list.length > 6
				}
			},
			immediate: true
		}
	},
	inject:['exposure'],
	created() {
		try{
			this.exposure && this.exposure.push(this)
		}catch(e){
			//TODO handle the exception
		}
	},
	computed:{
		isShowMarketValue(){
			return this.$globalData.state.isShowMarketValue
		}
	},
	methods: {
		goToGoodDetail(spuId,i) {
			try {
				this.exposure.handleClick(spuId);
			} catch (e) {
				//TODO handle the exception
			}
			var statInfo = { Ref_Module_Type: this.sourceType, Ref_Module_ID: this.refModuleId, Ref_Module_Order: this.moduleOrder, Ref_Module_Inner_Order: i + 1 };
			this.$routeUtils.navigateTo({
				url: `/pages/goods/detail?spuId=${spuId}`
			},statInfo)
		},
		//跳转至查看更多页面
		goMore(){
			let par = this.params;
			console.log(par);
			var statInfo = { Ref_Module_Type: this.sourceType, Ref_Module_ID: this.refModuleId, Ref_Module_Order: this.moduleOrder, Ref_Module_Inner_Order: 1 };
			this.$routeUtils.navigateTo({
				url: `/package_goods/goodsList/productList?params=${par}`
			},statInfo)
		},
		countPrice(item){
			return this.$utils.judgeStatusPrice(item)
		},
		handletouchmove: function(event) {
			// console.log(event)
			if (this.flag !== 0) {
				return;
			}
			let currentX = event.touches[0].pageX;
			let currentY = event.touches[0].pageY;
			let tx = currentX - this.lastX;
			let ty = currentY - this.lastY;
			let text = '';
			this.mindex = -1;
			//左右方向滑动
			if (Math.abs(tx) > Math.abs(ty)) {
				if (tx < 0) {
					// text = '向左滑动';
					this.flag = 1;
					//  this.getList();  //调用列表的方法
				} else if (tx > 0) {
					// text = '向右滑动';
					this.flag = 2;
				}
			}
			//上下方向滑动
			else {
				if (ty < 0) {
					// text = '向上滑动';
					this.flag = 3;
					//  this.getList();  //调用列表的方法
				} else if (ty > 0) {
					// text = '向下滑动'
					this.flag = 4;
				}
			}

			//将当前坐标进行保存以进行下一次计算
			this.lastX = currentX;
			this.lastY = currentY;
			this.text = text;
		},
		handletouchstart: function(event) {
			this.lastX = event.touches[0].pageX;
			this.lastY = event.touches[0].pageY;
		},
		handletouchend: function(event) {
			// this.flag = 0;
			if(this.flag == 1 || this.flag == 2){//左右滑动曝光埋单取数
				this.exposure.checkProductInWin();
			}
			this.flag = 0;
		}
	},
}
</script>

<style lang="scss" scoped>
	.product-wrap{
		display: flex;
		margin: 0 24rpx;
		overflow: auto;
		border-radius: 0 0 9rpx 9rpx;
	}

.product-item {
	width: 260rpx;
	min-width: 260rpx;
	padding-bottom: 16rpx;
	margin-right: 10rpx;
	border-radius: 8rpx;
	background-color: #ffffff;
	position: relative;
	box-sizing: border-box;
	&:last-child{margin-right: 0;}

	.image {
		width: 260rpx;
		height: 260rpx;
		background-color: #EAEAEA;
		display: block;
	}

	.can-interal-mall {
		background: rgba(255, 255, 255, 0.8);
		height: 48rpx;
		line-height: 48rpx;
		width: 100%;
		position: absolute;
		top: 212rpx;
		font-size: 24rpx;
		font-weight: 500;
		color: rgba(0, 128, 203, 1);

		.interal-image {
			width: 32rpx;
			height: 32rpx;
			margin-right: 8rpx;
			vertical-align: text-bottom;
		}
	}

	.des {
		font-size: 26rpx;
		color: #333;
		margin: 16rpx 16rpx 8rpx;
		line-height: 36rpx;
		height: 72rpx;
		display: block;
		text-align: left;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.items {
		text-align: left;
		margin:0 16rpx;
		.price {
			color: #ff004f;
			font-size: medium;
			font-weight: 600;
			.small {
				font-size: 20rpx;
			}
		}

		.payments {
			margin-right: 20rpx;
			font-size: 24rpx;
			color: #999;
		}
	}

	.startPrice {
		font-size: 26rpx;
		font-weight: 400;
		color: rgba(102, 102, 102, 0.8);
	}

}
.checkMore{
	background:#fff;
	.checkmoreImg{width:260rpx; display: inline-block; height:452rpx;
		background: url('https://resource.migudm.cn/group1/M00/D1/C8/oYYBAGQhgaiAHA3vAAAGkY1Hf2M167.png') no-repeat center center;
		background-size: 120rpx;
	}
}
.empty-image {
	width: 260rpx;
	height: 260rpx;
	background: rgba(0, 0, 0, 0.3);
	position: absolute;
	border-radius: 8rpx;
	left: 0;
	top: 0;

	.img {
		width: 136rpx;
		height: 136rpx;
		background: rgba(0, 0, 0, 0);
		position: absolute;
		left: 50%;
		top: 50%;
		margin-left: -68rpx;
		margin-top: -68rpx;
	}
}
.pro-icon-box {
	margin-top: 4rpx;
}
</style>
